<template>
  <div class="payment-page">
    <!-- 顶部导航栏 -->
    <div class="header">
      <el-button type="text" @click="showLeavePrompt">
        <el-icon><ArrowLeft /></el-icon>
      </el-button>
      <span class="title">收银台</span>
      <el-button type="text" @click="goToOrderDetail">订单详情</el-button>
    </div>
    <!-- 金额展示 -->
    <div class="amount-container">
      <span class="currency-symbol">¥</span>
      <span class="amount-value">{{ paymentAmount }}</span>
    </div>
    <!-- 支付方式列表 -->
    <div class="payment-methods">
      <div 
        v-for="(method, index) in paymentMethods" 
        :key="index" 
        class="payment-method"
        :class="{ selected: method.selected }"
        @click="selectPaymentMethod(index)"
      >
        <div class="method-icon">
          <img :src="method.icon" alt="支付方式图标">
        </div>
        <div class="method-name">{{ method.name }}</div>
        <div v-if="method.balance" class="balance-info">
          （余额：{{ method.balance }}）
        </div>
        <el-radio v-model="selectedPaymentIndex" :label="index"></el-radio>
      </div>
    </div>
    <!-- 支付按钮 -->
    <el-button 
      type="primary" 
      class="pay-button" 
      @click="submitPayment"
      :disabled="!selectedPaymentIndex"
    >
      支付
    </el-button>
    <!-- 弹出提示 -->
    <el-dialog
      title="确定放弃付款吗?"
      v-model="showDialog"
      width="300px"
      append-to-body
    >
      <p>超过30分钟，订单将会被取消</p>
      <template #footer>
        <el-button @click="showDialog = false">继续支付</el-button>
        <el-button type="danger" @click="handleLeave">确定离开</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ArrowLeft } from '@element-plus/icons-vue'
import { ElButton, ElIcon, ElRadio, ElDialog } from 'element-plus'
import { useRouter } from 'vue-router'

// 支付金额
const paymentAmount = ref(2000.00)

// 支付方式列表
const paymentMethods = ref([
  {
    id: 1,
    name: '我的钱包',
    icon: 'https://example.com/wallet-icon.png', // 替换为实际钱包图标地址
    balance: 1314.00,
    selected: false
  },
  {
    id: 2,
    name: '微信支付',
    icon: 'https://example.com/wechat-icon.png', // 替换为实际微信图标地址
    balance: null,
    selected: false
  },
  {
    id: 3,
    name: '支付宝支付',
    icon: 'https://example.com/alipay-icon.png', // 替换为实际支付宝图标地址
    balance: null,
    selected: false
  },
  {
    id: 4,
    name: '银联支付',
    icon: 'https://example.com/unionpay-icon.png', // 替换为实际银联图标地址
    balance: null,
    selected: false
  }
])

// 当前选中的支付方式索引
const selectedPaymentIndex = ref(null)

// 控制弹出提示的显示与隐藏
let showDialog = ref(false)

// 引入路由
const router = useRouter()

// 返回上一页（确认订单页）
const showLeavePrompt = () => {
  showDialog = true
}

const handleLeave = () => {
  router.push({ name: 'Checkout' })
  showDialog = false
}

// 查看订单详情
const goToOrderDetail = () => {
  // 这里可实现跳转到订单详情页面的逻辑，比如使用vue-router的router.push()
  console.log('跳转到订单详情页面')
}

// 选择支付方式
const selectPaymentMethod = (index) => {
  paymentMethods.value.forEach((method, i) => {
    method.selected = i === index
  })
  selectedPaymentIndex.value = index
}

// 提交支付
const submitPayment = () => {
  const selectedMethod = paymentMethods.value[selectedPaymentIndex.value]
  console.log(`使用${selectedMethod.name}进行支付，金额：${paymentAmount.value}`)
  // 实际项目中这里调用支付接口进行支付操作
}
</script>

<style scoped>
.payment-page {
  background-color: #fafafa;
  padding: 20px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.header {
  display: flex;
  align-items: center;
  background-color: red;
  color: white;
  padding: 15px;
}

.title {
  flex: 1;
  text-align: center;
  font-size: 20px;
}

.amount-container {
  margin: 20px 0;
  text-align: center;
}

.currency-symbol {
  font-size: 20px;
  color: red;
}

.amount-value {
  font-size: 30px;
  color: red;
}

.payment-methods {
  margin-bottom: 20px;
}

.payment-method {
  display: flex;
  align-items: center;
  background-color: white;
  padding: 15px;
  border-radius: 10px;
  margin-bottom: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s ease;
}

.payment-method.selected {
  box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.2);
}

.method-icon {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.method-name {
  flex: 1;
  font-size: 16px;
}

.balance-info {
  font-size: 14px;
  color: #666;
}

.pay-button {
  background-color: red;
  color: white;
  border: none;
  border-radius: 20px;
  padding: 10px 20px;
  font-size: 18px;
  cursor: pointer;
}
</style>